import { PackageManagerTabs } from '@theme';
import Preparation from '../../shared/preparation.md'
import IconChange from '../../shared/problems/iconChange.md'
import YarnProblem from '../../shared/problems/yarnProblem.md'

# Vue2

在这篇文档中，你可以了解到如何基于 Emp 来构建一个 Vue2 应用。

<Preparation />

## 创建项目

emp支持使用脚手架创建Vue2项目,我们使用`create-emp`来创建一个 Emp + Vue2 的项目，调用命令如下：

<PackageManagerTabs command="create emp@latest" />

输入命令后，首先会提示你输入项目文件夹名称，根据您的需求输入设置即可，接下来在**Select framework**时选择`Vue2`即可创建一个全新的Vue2 Emp项目🎉。

## 运行项目

:::info 💡 TIP
建议使用您对应创建项目时使用的包管理器执行后续的命令，推荐使用`PNPM`作为您项目的包管理器。
:::

由于初始的项目不包含项目所需要的依赖，所以在运行项目之前，您需要安装所必须的所有依赖，调用命令：

<PackageManagerTabs command="install" />

安装完依赖后，您可以直接调用如下命令运行项目：

<PackageManagerTabs command="run dev" />

接下来Emp会极速为您构建运行项目⚡，最后访问`http://localhost:9002/`即可查看项目运行的效果。

## 目录约定

```
── node_modules        // 依赖目录
├── src                 
|   ├── App.vue         // 应用主组件
|   ├── boostrap.tsx    // 项目入口文件
|   └── index.ts        // 主要入口文件
├── .gitignore          // Git忽略文件列表
├── emp-config.js       // emp配置文件
├── package.json        // 项目依赖及配置信息
└── README.md           // 项目说明文档
```

## 常见问题

<IconChange />

<YarnProblem />